<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.min.js"></script>
        <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.14/lib/theme-chalk/index.css">
        <script src="https://unpkg.com/element-ui@2.15.14/lib/index.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <link rel="stylesheet" href="./css/index.css">
        <title>Student V4 FE</title>
    </head>
    <body>
        <div id="app">
            <el-container>
                <el-header>学生信息管理系统</el-header>
                <el-container>
                    <el-aside width="200px">
                        <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo">
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">学生管理</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <i class="el-icon-document"></i>
                                <span slot="title">老师管理</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-setting"></i>
                                <span slot="title">班级管理</span>
                            </el-menu-item>
                            </el-menu>
                    </el-aside>
                    <el-container>
                    <el-main>
                       <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>学生管理</el-breadcrumb-item>
                        </el-breadcrumb> 
                        <el-form :inline="true"  class="demo-form-inline" style="margin-top: 20px;">
                            <el-form-item label="学生姓名">
                                <el-input  placeholder="学生姓名" v-model="inputStr"></el-input>
                            </el-form-item>
                            <el-form-item style="float: right;">
                                <el-button-group>
                                    <el-button type="primary" icon="el-icon-edit" @click="queryStudent">查询</el-button>
                                    <el-button type="primary" icon="el-icon-share" @click="getStudentList">全部</el-button>
                                    <el-button type="primary" icon="el-icon-delete" @click="addStudentForm">添加</el-button>
                                </el-button-group>
                                <el-button-group style="margin-left: 30px;">
                                    <el-button type="primary" icon="el-icon-arrow-left">execl导入</el-button>
                                    <el-button type="primary">execl导出<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                                </el-button-group>
                            </el-form-item>
                        </el-form>
                        <el-table :data="pageStudents"
                            border
                            style="width: 100%">
                            <el-table-column type="selection" width="50">
                            </el-table-column>
                            <el-table-column type="index" label="序号" width="80">
                            </el-table-column>
                            <el-table-column prop="sno" label="学号" >
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" >
                            </el-table-column>
                            <el-table-column prop="gender" label="性别" >
                            </el-table-column>
                            <el-table-column prop="birthday" label="生日" >
                            </el-table-column>
                            <el-table-column prop="mobile" label="电话">
                            </el-table-column>
                            <el-table-column prop="email" label="邮箱">
                            </el-table-column>
                            <el-table-column prop="address" label="地址" >
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="160">
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                                <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                                <!-- <el-button type="text" size="small">编辑</el-button> -->
                            </template>
                            </el-table-column>
                        </el-table>
                        <el-row style="margin-top: 20px;">
                            <el-col :span="8" style="text-align: left;">
                                <el-button type="primary">批量删除</el-button>   
                            </el-col>
                            <el-col :span="16" style="text-align: right;">
                                <div class="block">
                                    <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :page-sizes="[5, 10, 50, 100]"
                                    :page-size="pageSize4"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="total">
                                    </el-pagination>
                                </div>
                            </el-col>
                        </el-row>  
                        <el-drawer
                            title="学生信息编辑"
                            :before-close="handleCloseDrawer"
                            :visible.sync="drawerVisible"
                            direction="rtl"
                            size="50%"
                            custom-class="demo-drawer"
                            ref="drawer"
                            >
                            <div class="demo-drawer__content">
                                <el-form :model="studentForm" :rules="rules" ref="form" label-width="80px" style="margin-right: 20px;">
                                    <el-form-item label="学号" prop="sno">
                                        <el-input v-model="studentForm.sno"></el-input>
                                    </el-form-item>
                                    <el-form-item label="姓名" prop="name">
                                        <el-input v-model="studentForm.name"></el-input>
                                    </el-form-item>
                                    <el-form-item label="性别">
                                        <el-radio-group v-model="studentForm.gender">
                                        <el-radio label="男">男</el-radio>
                                        <el-radio label="女">女</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="生日" prop="birthday">
                                        <el-col :span="11">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="studentForm.birthday" style="width: 100%;"></el-date-picker>
                                        </el-col>
                                    </el-form-item>
                                    <el-form-item label="电话" prop="mobile">
                                        <el-input v-model="studentForm.mobile"></el-input>
                                    </el-form-item>
                                     <el-form-item label="邮箱" prop="email">
                                        <el-input v-model="studentForm.email"></el-input>
                                    </el-form-item>
                                    <el-form-item label="地址" prop="address">
                                        <el-input v-model="studentForm.address"></el-input>
                                    </el-form-item>

                                    <el-form-item>
                                        <el-button type="primary" @click="submitForm">提交</el-button>
                                        <el-button @click="drawerVisible = false">取消</el-button>
                                    </el-form-item>
                                    </el-form>
                            </div>
                        </el-drawer>
                        


                    </el-main>
                    <el-footer>学生信息管理系统-微服科技-2020-10-20</el-footer>
                    </el-container>
                </el-container>
            </el-container>
        </div>
    </body>
</html>
<script src="./js/index.js"></script>